<template>
  <div id="app" ref="app">
    <div class="header_bar"></div>
    <div class="left_sider">
      <ul>
        <li class="sider_item">
          <button>编辑</button>
        </li>
      </ul>
    </div>
    <canvas class="edit" :width="editWidth" :height="editHeight"></canvas>
    <div class="right_sider"></div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import Two from "two.js";
export default {
  name: "App",
  data() {
    return {};
  },
  components: {
    HelloWorld,
  },
  mounted() {
    console.log(this.$refs.app.style);
    window.onresize = () => {
      console.log(2);
    };
  },
  methods: {
    update(e) {
      console.log(e);
    },
    handResize(e) {
      console.log(e);
    },
  },
  computed: {
    editWidth() {
      console.log(document.body.clientWidth);
      return document.body.clientWidth - 800;
    },
    editHeight() {
      console.log(document.body.clientWidth);
      return document.body.clientHeight - 400;
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#app {
  background-color: #0b4e91;
  height: 100vh;
  position: relative;
  min-width: 800px;
  .header_bar {
    height: 70px;
    width: 100%;
    background-color: #323a3c;
  }
  .left_sider {
    position: absolute;
    height: 50vh;
    width: 100px;
    left: 0;
    top: 25%;
    padding: 5px;
    background-color: #323a3c;
    .sider_item {
      height: 50px;
      width: 100%;
      background: #28a343;
      button {
        height: 100%;
        width: 100%;
        background-color: gray;
        color: rgba(255, 255, 255, 0.747);
      }
    }
  }
  .edit {
    position: absolute;
    left: 300px;
    top: 100vh - 75px;
    background-color: wheat;
  }
  .right_sider {
    position: absolute;
    height: 80%;
    width: 200px;
    right: 0;
    top: 10%;
    background-color: #323a3c;
  }
}
</style>
